<template>
    <div>
        <navigationBar :bgType="3" :backType="2" navigationTitle="写评价" />
        <view class="content">
            <view class="card">
                <view class="tip"> -写下真实体验，帮助万千用户选择- </view>
                <view class="score">
                    <text>技师评分</text>
                    <view
                        class="icons"
                        v-for="(item, index) in stars"
                        :key="index"
                        @click="changeStar(index)"
                    >
                        <image
                            v-if="item.type"
                            src="/static/static/technician/joinUs/startL.png"
                            mode="scaleToFill"
                        />
                        <image
                            v-else
                            src="/static/static/technician/joinUs/startN.png"
                            mode="scaleToFill"
                        />
                    </view>
                </view>
                <view class="textarea_box">
                    <textarea
                        class="textarea"
                        placeholder="亲，您对我们的服务师感觉如何，还满意吗？请输入您的宝贵评价~"
                        placeholder-class="placeholder"
                        v-model="content"
                        maxlength="100"
                    />
                    <text>{{ content.length }}/100</text>
                </view>
            </view>
            <view class="card">
                <view class="label"> 评价标签 </view>
                <view class="tag">
                    <view class="item" v-for="item in tags" :key="item.name">
                        <view
                            class="tag-bg"
                            :class="item.selected ? 'activeItem' : ''"
                            @click="changeTag(item)"
                        >
                            {{ item.name }}
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="btns">
            <view class="btn" @click="submit"> 提交评价 </view>
        </view>
    </div>
</template>
<script>
import { evaluateList, evaluateTechnician } from "@/API/API/recruit.js";
export default {
    data() {
        return {
            content: "",
            stars: [
                {
                    value: 1,
                    type: true,
                },
                {
                    value: 2,
                    type: false,
                },
                {
                    value: 3,
                    type: false,
                },
                {
                    value: 4,
                    type: false,
                },
                {
                    value: 5,
                    type: false,
                },
            ],
            tags: [], // 评价标签
            label_ids: [], // 选中的标签
            star: 1, // 评分
            order_id: "",
            technician_id: "",
        };
    },

    onLoad(options) {
        this.order_id = options.order_id;
        this.getTags();
    },

    methods: {
        // 提交
        submit() {
            if (!this.content) {
                uni.showToast({
                    title: "请填写评价内容",
                    icon: "none",
                });
                return;
            }
            if (this.label_ids.length == 0) {
                uni.showToast({
                    title: "请选择评价标签",
                    icon: "none",
                });
                return;
            }
            evaluateTechnician({
                star: this.star,
                content: this.content,
                label_ids: this.label_ids.join(","),
                order_id: this.order_id,
            })
                .then((res) => {
                    uni.showToast({
                        title: "评价成功",
                        icon: "none",
                    });
                    setTimeout(() => {
                        uni.navigateBack({
                            delta: 1,
                        });
                    }, 800);
                })
                .catch((err) => {
                    uni.showToast({
                        title: err.msg,
                        icon: "none",
                    });
                });
        },
        // 提交评价
        changeStar(index) {
            this.stars.forEach((item, i) => {
                if (i <= index) {
                    item.type = true;
                } else {
                    item.type = false;
                }
            });
            this.star = index + 1;
        },
        // 改变标签
        changeTag(item) {
            item.selected = !item.selected;
            this.label_ids = [];
            this.tags.forEach((item) => {
                if (item.selected) {
                    this.label_ids.push(item.id);
                }
            });
        },
        // 获取标签列表
        getTags() {
            evaluateList()
                .then((res) => {
                    res.data.forEach((item) => {
                        item.selected = false;
                    });
                    this.tags = res.data;
                })
                .catch((err) => {
                    uni.showToast({
                        title: err.msg,
                        icon: "none",
                    });
                });
        },
    },
};
</script>
<style lang="scss" scoped>
.content {
    padding: 20rpx 20rpx 150rpx 20rpx;
    .tip {
        font-size: 28rpx;
        color: #f87918;
        margin-bottom: 20rpx;
        text-align: center;
    }
    .score {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        > text {
            font-size: 32rpx;
            margin-right: 20rpx;
            color: #201c1c;
            font-weight: bold;
        }
        .icons {
            display: flex;
            align-items: center;
            image {
                width: 40rpx;
                height: 40rpx;
                margin-right: 10rpx;
            }
        }
    }
    .textarea_box {
        position: relative;
        .textarea {
            width: 100%;
            height: 400rpx;
            background: #f7f7f7;
            border-radius: 20rpx;
            padding: 20rpx;
            font-size: 28rpx;
            box-sizing: border-box;
        }
        text {
            position: absolute;
            bottom: 20rpx;
            right: 20rpx;
            font-size: 24rpx;
            color: #b0b0b0;
        }
    }

    .label {
        font-size: 32rpx;
        color: #201c1c;
        margin-bottom: 20rpx;
        font-weight: bold;
    }
    .tag {
        display: flex;
        flex-wrap: wrap;
        .item {
            width: 140rpx;
            height: 50rpx;
            line-height: 50rpx;
            text-align: center;
            margin: 0 20rpx 20rpx 0;
            border-radius: 40rpx;
            .tag-bg {
                height: 50rpx;
                line-height: 50rpx;
                background: #fff;
                border: 1px solid #ececec;
                border-radius: 40rpx;
                font-size: 24rpx;
                color: #999999;
            }
        }
    }
}
.card {
    background: white;
    padding: 20rpx 30rpx;
    margin-bottom: 20rpx;
    border-radius: 20rpx;
}
.btns {
    background: white;
    width: 100vw;
    height: 130rpx;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.1);

    .btn {
        position: absolute;
        height: 80rpx;
        line-height: 80rpx;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        background: $grad-theme-color;
        border-radius: 40rpx;
        color: white;
        text-align: center;
        font-size: 30rpx;
    }
}
.activeItem {
    background: $theme-color !important;
    color: white !important;
}
</style>